<template>
  <div class="app-container">
    <div class="search-div">
      <el-row>
        <el-col :span="1">
          <el-button type="primary" :icon="ArrowLeft" @click="back()"
            >返回列表</el-button
          >
        </el-col>
      </el-row>
    </div>

    <div class="table-div">
      <div style="height: calc(100% - 35px)">
        <el-form
          :model="formDialog"
          :rules="rulesDialog"
          ref="formRefDialog"
          label-width="180px"
        >
          <el-form-item label="催化剂型号：" prop="catalystsName">
            <el-input
              v-model="formDialog.catalystsName"
              placeholder="请输入催化剂型号"
              style="width: 35%"
            ></el-input>
          </el-form-item>
          <el-form-item label="催化剂类型号：" prop="categoryName">
            <el-input
              v-model="formDialog.categoryName"
              placeholder="请输入催化剂类型号"
              style="width: 35%"
            ></el-input>
          </el-form-item>
        </el-form>
        <div style="display: flex; margin-bottom: 10px">
          <div class="shuxian"></div>
          <span class="headtitle">基础数据</span>
        </div>
        <el-form
          :model="formDialog"
          :rules="rulesDialog"
          ref="formRefDialog"
          label-width="180px"
          inline="true"
        >
          <el-form-item label="模块型号：" prop="moduleName" style="width: 48%">
            <el-input
              v-model="formDialog.moduleName"
              placeholder="请输入模块型号"
            ></el-input>
          </el-form-item>
          <el-form-item label="模块尺寸：" prop="moduleH" style="width: 48%">
            <el-input v-model="formDialog.moduleL" style="width: 200px">
              <template #prepend>L:</template>
              <template #append>mm</template>
            </el-input>
            <el-input
              v-model="formDialog.moduleW"
              style="width: 200px; margin-left: 10px"
            >
              <template #prepend>W:</template>
              <template #append>mm</template>
            </el-input>
            <el-input
              v-model="formDialog.moduleH"
              style="width: 200px; margin-left: 10px"
            >
              <template #prepend>H:</template>
              <template #append>mm</template>
            </el-input>
          </el-form-item>
          <el-form-item
            label="每层催化剂净高度："
            prop="catalystsH"
            style="width: 48%"
          >
            <el-input
              v-model="formDialog.catalystsH"
              placeholder="请输入每层催化剂净高度"
            >
              <template #append>mm</template></el-input
            >
          </el-form-item>
          <el-form-item
            label="每个模块毛重："
            prop="moduleKg"
            style="width: 48%"
          >
            <el-input
              v-model="formDialog.moduleKg"
              placeholder="请输入每个模块毛重"
            >
              <template #append>Kg</template></el-input
            >
          </el-form-item>

          <el-form-item label="波纹宽度：" style="width: 48%">
            <el-input v-model="formDialog.rippleW" placeholder="请输入波纹宽度">
              <template #append>mm</template></el-input
            >
          </el-form-item>
          <el-form-item label="波纹高度：" style="width: 48%">
            <el-input v-model="formDialog.rippleH" placeholder="请输入波纹高度">
              <template #append>mm</template></el-input
            >
          </el-form-item>
          <el-form-item label="波纹板厚度：" style="width: 48%">
            <el-input
              v-model="formDialog.rippleThickness"
              placeholder="请输入波纹板厚度"
            >
              <template #append>mm</template></el-input
            >
          </el-form-item>
          <el-form-item label="平板厚度：" style="width: 48%">
            <el-input
              v-model="formDialog.plateThickness"
              placeholder="请输入平板厚度"
            >
              <template #append>mm</template></el-input
            >
          </el-form-item>
          <el-form-item label="节距：" style="width: 48%">
            <el-input v-model="formDialog.pitch" placeholder="请输入节距">
              <template #append>mm</template></el-input
            >
          </el-form-item>
          <el-form-item label="几何比表面积：" style="width: 48%">
            <el-input
              v-model="formDialog.geometryAreaRate"
              placeholder="请输入几何比表面积"
            >
              <template #append>m2/m3</template></el-input
            >
          </el-form-item>
          <el-form-item label="开孔率：" prop="trepanRate" style="width: 48%">
            <el-input
              v-model="formDialog.trepanRate"
              placeholder="请输入开孔率"
            >
              <template #append>%</template></el-input
            >
          </el-form-item>
          <el-form-item label="磨损率：" style="width: 48%">
            <el-input v-model="formDialog.wearRate" placeholder="请输入磨损率">
              <template #append>%kg</template></el-input
            >
          </el-form-item>
          <el-form-item
            v-show="false"
            label="催化剂活性系数K0："
            style="width: 48%"
          >
            <el-input
              v-model="formDialog.k0"
              placeholder="请输入催化剂活性系数K0"
            ></el-input>
          </el-form-item>
        </el-form>
        <div style="text-align: center">
          <el-button type="primary" @click="save()">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { ArrowLeft } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import request from "@/utils/request";
import { useRoute } from "vue-router";

const route = useRoute(); //接受传参用
const id = route.params.id;
const router = useRouter(); //页面跳转用

const formDialog = ref({});
const formRefDialog = ref(null);
const rulesDialog = {
  catalystsName: [
    { required: true, message: "请选择催化剂型号", trigger: "blur" },
  ],
  categoryName: [
    { required: true, message: "请输入催化剂类型号", trigger: "blur" },
  ],
  moduleName: [{ required: true, message: "请输入模块型号", trigger: "blur" }],
  moduleH: [{ required: true, message: "请输入模块尺寸", trigger: "blur" }],
  catalystsH: [
    { required: true, message: "请输入每层催化剂净高度", trigger: "blur" },
  ],
  moduleKg: [
    { required: true, message: "请输入每个模块毛重", trigger: "blur" },
  ],
  trepanRate: [{ required: true, message: "请输入开孔率", trigger: "blur" }],
};

function back() {
  router.push("/catalyzer/catalyzerData").then(() => {
    // 通过重新加载当前路由实现刷新
    router.go(0);
  });
}

function getList() {
  request({
    url: "/catalyzer/catalyzerData/" + id,
    method: "get",
    params: {},
  }).then((response) => {
    formDialog.value = response.data;
  });
}

//保存
function save() {
  const url = ref("/catalyzer/catalyzerData/");
  if (id == 0) {
    url.value = "/catalyzer/catalyzerData/insert";
  } else {
    url.value = "/catalyzer/catalyzerData/update";
    formDialog.value.catalystsId = id;
  }
  formDialog.value.kYear = "2,3,4,5,6"; //默认2-6年
  formDialog.value.kValue =
    formDialog.value.categoryName == "639"
      ? "53.3707,48.8125,45.5607,42.3018,40.3493"
      : "61.8268,56.9491,52.0643,48.8125,45.5607"; //默认2-6年

  formRefDialog.value.validate((valid) => {
    if (valid) {
      request({
        url: url.value,
        method: "post",
        data: formDialog.value,
      }).then((response) => {
        if (response.code == 200) {
          ElMessage.success("保存成功");
          router.push("/catalyzer/catalyzerData").then(() => {});
        }
      });
    }
  });
}
onMounted(() => {
  if (id != 0) {
    getList();
  }
});
</script>

<style scoped>
.app-container {
  padding: 10px;
  height: 100%;
  width: 100%;
}

.search-div {
  height: 7%;
  width: 100%;
  padding: 10px;
  border-radius: 4px;
}
.table-div {
  height: calc(90% - 20px);
  width: 100%;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow-y: auto;
}

.center-content {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100%; /* 确保高度占满父容器 */
}

.shuxian {
  height: 23px;
  width: 5px;
  margin-left: 2%;
  background-color: #355af0;
}

.headtitle {
  margin-left: 10px;
  font-size: 18px;
}
</style>
